<template>
  <div class="account">
    <van-nav-bar title="账户维护" left-arrow @click-left="onClickLeft" />
    <div style="padding: 16px; border-radius: 20px">
      <div class="account-title" style="font-size: 16px; padding: 12px 6px">
        <img :src="enterprise" style="width:20px; margin-left:8px; margin-right:4px; float:left;margin-top:-3px">{{ userInfo.enterpriseName || "-" }}
      </div>

      <van-cell-group class="account-info">
        <!-- <van-cell title="类型" value="公司" /> -->
        <van-cell title="联系人" :value="userInfo.contactName || ''" />
        <van-cell title="联系电话" :value="userInfo.contactPhone || ''" />
        <!-- <van-cell title="联系邮箱" :value="userInfo.contactName || ''" /> -->
        <van-cell title="地址" :value="address" />
        <van-cell title="详细地址" :value="userInfo.contactAddress || ''" />
        <van-cell title="审核状态" :value="checkStatusName" />
        <van-cell title="营业执照" value="" />
        <div style="padding: 0 16px;min-height:100px">
          <van-image v-if="imgUrl" width="100%" style="min-height:100px" @click="imgClick" fit="cover" :src="imgUrl">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <van-empty v-else description="暂无营业执照" />
        </div>
      </van-cell-group>
      <div style="margin: 16px 0">
        <van-button block type="info" @click="toEditAccount">编辑</van-button>
      </div>
      <div style="margin: 16px 0">
        <van-button block @click="() => $router.push('/personCenter')">取消</van-button>
      </div>
      <van-image-preview v-model="show" :images="images" @change="onChange">
      </van-image-preview>
    </div>
  </div>
</template>
  
<script>
import enterprise from '../../images/enterprise.png'
export default {
  name: "home",
  data() {
    return {
      show: false,
      index: 0,
      images: [],
      imgUrl: "",
      userInfo: {},
      checkStatusName: "",
      address: '',
      enterprise
    };
  },
  computed: {
    // userInfo() {
    //   const userInfo = localStorage.getItem("userInfo");
    //   if (userInfo) {
    //     return JSON.parse(userInfo);
    //   }
    //   return {};
    // },
    // checkStatusName() {
    //   const userInfo = localStorage.getItem("userInfo");
    //   if (userInfo) {
    //     const checkStatus = JSON.parse(userInfo).checkStatus;
    //     return checkStatus === "0"
    //       ? "未审核"
    //       : checkStatus === "1"
    //       ? "待审核"
    //       : checkStatus === "2"
    //       ? "审核未通过"
    //       : checkStatus === "3"
    //       ? "审核通过"
    //       : "";
    //   }
    //   return "";
    // },
    // address() {
    //   const { userInfo } = this;
    //   if (userInfo) {
    //     return userInfo.sheng + userInfo.shi + userInfo.qu || "";
    //   }
    //   return "";
    // },
  },
  methods: {
    onClickLeft() {
      this.$router.push("/personCenter");
    },
    onChange(index) {
      this.index = index;
    },
    imgClick(url) {
      this.images = [url];
      this.show = true;
    },
    toEditAccount() {
      this.$router.push("/editAccount");
    },
  },
  mounted() {
    this.$get("/customer/getInfo").then((res) => {
      localStorage.setItem("userInfo", JSON.stringify(res.data));
      const checkStatus = res.data.checkStatus;
      this.checkStatusName =
        checkStatus === "0"
          ? "未审核"
          : checkStatus === "1"
          ? "待审核"
          : checkStatus === "2"
          ? "审核未通过"
          : checkStatus === "3"
          ? "审核通过"
          : "";
      this.userInfo = res.data;
      this.address = res.data.sheng ? res.data.sheng + '/' + res.data.shi + '/' + res.data.qu : '';
      this.imgUrl = res.data.businessLicense;
    });
  },
};
</script>
<style scoped>
.account {
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
  font-size: 1rem;
}

.tel {
  line-height: 100%;
  text-align: center;
  margin-top: 50%;
}

.account-label {
  float: left;
}

.account-value {
  float: right;
}

.account-title {
  background-color: #fff;
  padding: 0.5rem 0.45rem;
  border-bottom: 1px #dddddd solid;
}

.account-title-icon {
  margin-right: 0.2rem;
}

.account-info {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.van-cell:not(:last-child)::after {
  border: none;
}

.van-cell {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
</style>
